<html>
<head>
  <title>Title</title>
  <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

  <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/css/font-awesome.min.css?v=4.3.0" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/css/animate.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/css/style.css?v=3.2.0" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/js/plugins/layer/skin/layer.css">
</head>
<body class="fixed-sidebar full-height-layout gray-bg">
<div id="wrapper">
  <!--左侧导航开始-->
  <nav class="navbar-default navbar-static-side" role="navigation">
    <div class="nav-close"><i class="fa fa-times-circle"></i>
    </div>
    <div class="sidebar-collapse">
      <ul class="nav" id="side-menu">
        <li class="nav-header">
          <div class="dropdown profile-element">
            <span><img alt="image" class="img-circle" src="${pageContext.request.contextPath}/static/img/image/profile_small.jpg" /></span>
            <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                                <span class="clear">
                               <span class="block m-t-xs"><strong class="font-bold">Beaut-zihan</strong></span>
                                <span class="text-muted text-xs block">超级管理员<b class="caret"></b></span>
                                </span>
            </a>
            <ul class="dropdown-menu animated fadeInRight m-t-xs">
              <li><a class="J_menuItem" href="form_avatar.html">修改头像</a>
              </li>
              <li><a class="J_menuItem" href="profile.html">个人资料</a>
              </li>
              <li><a class="J_menuItem" href="contacts.html">联系我们</a>
              </li>
              <li><a class="J_menuItem" href="mailbox.html">信箱</a>
              </li>
              <li class="divider"></li>
              <li><a href="login.html">安全退出</a>
              </li>
            </ul>
          </div>
          <div class="logo-element">H+
          </div>
        </li>
        <c:forEach var="list" items="${cusUserMenuList}">
          <c:if test="${list.parentId==1}">
            <li>
              <a href="index.html#">
                <i class="fa fa-cubes"></i>
                <span class="nav-label">${list.menuName}</span>
                <span class="fa arrow"></span>
              </a>
              <c:forEach var="list1" items="${cusUserMenuList}">
                <c:if test="${list1.parentId ==list.menuId}">
                  <ul class="nav nav-second-level" >
                    <li>
                      <a class="J_menuItem" href="${list1.href}" data-index="0">${list1.menuName}</a>
                    </li>
                  </ul>
                </c:if>
              </c:forEach>
            </li>
          </c:if>

        </c:forEach>
      </ul>
    </div>
  </nav>
  <!--左侧导航结束-->
  <!--右侧部分开始-->
  <div id="page-wrapper" class="gray-bg dashbard-1">
    <div class="row content-tabs">
      <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
      </button>
      <nav class="page-tabs J_menuTabs">
        <div class="page-tabs-content">
          <a href="javascript:;" class="active J_menuTab" data-id=" ">首页</a>
        </div>
      </nav>
      <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i>
      </button>
      <div class="btn-group roll-nav roll-right">
        <button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span>

        </button>
        <ul role="menu" class="dropdown-menu dropdown-menu-right">
          <li class="J_tabShowActive"><a>定位当前选项卡</a>
          </li>
          <li class="divider"></li>
          <li class="J_tabCloseAll"><a>关闭全部选项卡</a>
          </li>
          <li class="J_tabCloseOther"><a>关闭其他选项卡</a>
          </li>
        </ul>
      </div>
      <a href="login.html" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
    </div>
    <div class="row J_mainContent" id="content-main">
      <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src=" " frameborder="0" data-id=" " seamless></iframe>
    </div>
    <div class="footer">
      <div class="pull-right">&copy; 2014-2015 <a href="../../index.html" target="_blank">zihan's blog</a>
      </div>
    </div>
  </div>
  <!--右侧部分结束-->
  <!--右侧边栏开始-->
  <div id="right-sidebar">
    <div class="sidebar-container">

      <ul class="nav nav-tabs navs-3">

        <li class="active"><a data-toggle="tab" href="index.html#tab-1">
          通知
        </a>
        </li>
        <li><a data-toggle="tab" href="index.html#tab-2">
          项目进度
        </a>
        </li>
        <li class="">
          <a data-toggle="tab" href="index.html#tab-3">
            <i class="fa fa-gear"></i>
          </a>
        </li>
      </ul>

      <div class="tab-content">


        <div id="tab-1" class="tab-pane active">

          <div class="sidebar-title">
            <h3> <i class="fa fa-comments-o"></i> 最新通知</h3>
            <small><i class="fa fa-tim"></i> 您当前有10条未读信息</small>
          </div>

          <div>

            <div class="sidebar-message">
              <a href="index.html#">
                <div class="pull-left text-center">
                  <img alt="image" class="img-circle message-avatar" src="${pageContext.request.contextPath}/static/img/image/a1.jpg">

                  <div class="m-t-xs">
                    <i class="fa fa-star text-warning"></i>
                    <i class="fa fa-star text-warning"></i>
                  </div>
                </div>
                <div class="media-body">

                  据天津日报报道：瑞海公司董事长于学伟，副董事长董社轩等10人在13日上午已被控制。
                  <br>
                  <small class="text-muted">今天 4:21</small>
                </div>
              </a>
            </div>
            <div class="sidebar-message">
              <a href="index.html#">
                <div class="pull-left text-center">
                  <img alt="image" class="img-circle message-avatar" src="${pageContext.request.contextPath}/static/img/image/a2.jpg">
                </div>
                <div class="media-body">
                  HCY48之音乐大魔王会员专属皮肤已上线，快来一键换装拥有他，宣告你对华晨宇的爱吧！
                  <br>
                  <small class="text-muted">昨天 2:45</small>
                </div>
              </a>
            </div>
            <div class="sidebar-message">
              <a href="index.html#">
                <div class="pull-left text-center">
                  <img alt="image" class="img-circle message-avatar" src="${pageContext.request.contextPath}/static/img/image/a3.jpg">

                  <div class="m-t-xs">
                    <i class="fa fa-star text-warning"></i>
                    <i class="fa fa-star text-warning"></i>
                    <i class="fa fa-star text-warning"></i>
                  </div>
                </div>
                <div class="media-body">
                  写的好！与您分享
                  <br>
                  <small class="text-muted">昨天 1:10</small>
                </div>
              </a>
            </div>
            <div class="sidebar-message">
              <a href="index.html#">
                <div class="pull-left text-center">
                  <img alt="image" class="img-circle message-avatar" src="${pageContext.request.contextPath}/static/img/image/a4.jpg">
                </div>

                <div class="media-body">
                  国外极限小子的炼成！这还是亲生的吗！！
                  <br>
                  <small class="text-muted">昨天 8:37</small>
                </div>
              </a>
            </div>
            <div class="sidebar-message">
              <a href="index.html#">
                <div class="pull-left text-center">
                  <img alt="image" class="img-circle message-avatar" src="${pageContext.request.contextPath}/static/img/image/a8.jpg">
                </div>
                <div class="media-body">

                  一只流浪狗被收留后，为了减轻主人的负担，坚持自己觅食，甚至......有些东西，可能她比我们更懂。
                  <br>
                  <small class="text-muted">今天 4:21</small>
                </div>
              </a>
            </div>
            <div class="sidebar-message">
              <a href="index.html#">
                <div class="pull-left text-center">
                  <img alt="image" class="img-circle message-avatar" src="${pageContext.request.contextPath}/static/img/image/a7.jpg">
                </div>
                <div class="media-body">
                  这哥们的新视频又来了，创意杠杠滴，帅炸了！
                  <br>
                  <small class="text-muted">昨天 2:45</small>
                </div>
              </a>
            </div>
            <div class="sidebar-message">
              <a href="index.html#">
                <div class="pull-left text-center">
                  <img alt="image" class="img-circle message-avatar" src="${pageContext.request.contextPath}/static/img/image/a3.jpg">

                  <div class="m-t-xs">
                    <i class="fa fa-star text-warning"></i>
                    <i class="fa fa-star text-warning"></i>
                    <i class="fa fa-star text-warning"></i>
                  </div>
                </div>
                <div class="media-body">
                  最近在补追此剧，特别喜欢这段表白。
                  <br>
                  <small class="text-muted">昨天 1:10</small>
                </div>
              </a>
            </div>
            <div class="sidebar-message">
              <a href="index.html#">
                <div class="pull-left text-center">
                  <img alt="image" class="img-circle message-avatar" src="${pageContext.request.contextPath}/static/img/image/a4.jpg">
                </div>
                <div class="media-body">
                  我发起了一个投票 【你认为下午大盘会翻红吗？】
                  <br>
                  <small class="text-muted">星期一 8:37</small>
                </div>
              </a>
            </div>
          </div>

        </div>

        <div id="tab-2" class="tab-pane">

          <div class="sidebar-title">
            <h3> <i class="fa fa-cube"></i> 最新任务</h3>
            <small><i class="fa fa-tim"></i> 您当前有14个任务，10个已完成</small>
          </div>

          <ul class="sidebar-list">
            <li>
              <a href="index.html#">
                <div class="small pull-right m-t-xs">9小时以后</div>
                <h4>市场调研</h4> 按要求接收教材；

                <div class="small">已完成： 22%</div>
                <div class="progress progress-mini">
                  <div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
                </div>
                <div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
              </a>
            </li>
            <li>
              <a href="index.html#">
                <div class="small pull-right m-t-xs">9小时以后</div>
                <h4>可行性报告研究报上级批准 </h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对

                <div class="small">已完成： 48%</div>
                <div class="progress progress-mini">
                  <div style="width: 48%;" class="progress-bar"></div>
                </div>
              </a>
            </li>
            <li>
              <a href="index.html#">
                <div class="small pull-right m-t-xs">9小时以后</div>
                <h4>立项阶段</h4> 东风商用车公司 采购综合综合查询分析系统项目进度阶段性报告武汉斯迪克科技有限公司

                <div class="small">已完成： 14%</div>
                <div class="progress progress-mini">
                  <div style="width: 14%;" class="progress-bar progress-bar-info"></div>
                </div>
              </a>
            </li>
            <li>
              <a href="index.html#">
                <span class="label label-primary pull-right">NEW</span>
                <h4>设计阶段</h4>
                <!--<div class="small pull-right m-t-xs">9小时以后</div>-->
                项目进度报告(Project Progress Report)
                <div class="small">已完成： 22%</div>
                <div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
              </a>
            </li>
            <li>
              <a href="index.html#">
                <div class="small pull-right m-t-xs">9小时以后</div>
                <h4>拆迁阶段</h4> 科研项目研究进展报告 项目编号: 项目名称: 项目负责人:

                <div class="small">已完成： 22%</div>
                <div class="progress progress-mini">
                  <div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
                </div>
                <div class="small text-muted m-t-xs">项目截止： 4:00 - 2015.10.01</div>
              </a>
            </li>
            <li>
              <a href="index.html#">
                <div class="small pull-right m-t-xs">9小时以后</div>
                <h4>建设阶段 </h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对

                <div class="small">已完成： 48%</div>
                <div class="progress progress-mini">
                  <div style="width: 48%;" class="progress-bar"></div>
                </div>
              </a>
            </li>
            <li>
              <a href="index.html#">
                <div class="small pull-right m-t-xs">9小时以后</div>
                <h4>获证开盘</h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对

                <div class="small">已完成： 14%</div>
                <div class="progress progress-mini">
                  <div style="width: 14%;" class="progress-bar progress-bar-info"></div>
                </div>
              </a>
            </li>

          </ul>

        </div>

        <div id="tab-3" class="tab-pane">

          <div class="sidebar-title">
            <h3><i class="fa fa-gears"></i> 设置</h3>
          </div>

          <div class="setings-item">
                            <span>
                        显示通知
                    </span>
            <div class="switch">
              <div class="onoffswitch">
                <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example">
                <label class="onoffswitch-label" for="example">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
                </label>
              </div>
            </div>
          </div>
          <div class="setings-item">
                            <span>
                        隐藏聊天窗口
                    </span>
            <div class="switch">
              <div class="onoffswitch">
                <input type="checkbox" name="collapsemenu" checked class="onoffswitch-checkbox" id="example2">
                <label class="onoffswitch-label" for="example2">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
                </label>
              </div>
            </div>
          </div>
          <div class="setings-item">
                            <span>
                        清空历史记录
                    </span>
            <div class="switch">
              <div class="onoffswitch">
                <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example3">
                <label class="onoffswitch-label" for="example3">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
                </label>
              </div>
            </div>
          </div>
          <div class="setings-item">
                            <span>
                        显示聊天窗口
                    </span>
            <div class="switch">
              <div class="onoffswitch">
                <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example4">
                <label class="onoffswitch-label" for="example4">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
                </label>
              </div>
            </div>
          </div>
          <div class="setings-item">
                            <span>
                        显示在线用户
                    </span>
            <div class="switch">
              <div class="onoffswitch">
                <input type="checkbox" checked name="collapsemenu" class="onoffswitch-checkbox" id="example5">
                <label class="onoffswitch-label" for="example5">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
                </label>
              </div>
            </div>
          </div>
          <div class="setings-item">
                            <span>
                        全局搜索
                    </span>
            <div class="switch">
              <div class="onoffswitch">
                <input type="checkbox" checked name="collapsemenu" class="onoffswitch-checkbox" id="example6">
                <label class="onoffswitch-label" for="example6">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
                </label>
              </div>
            </div>
          </div>
          <div class="setings-item">
                            <span>
                        每日更新
                    </span>
            <div class="switch">
              <div class="onoffswitch">
                <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example7">
                <label class="onoffswitch-label" for="example7">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
                </label>
              </div>
            </div>
          </div>

          <div class="sidebar-content">
            <h4>设置</h4>
            <div class="small">
              你可以从这里设置一些常用选项，当然啦，这个只是个演示的示例。
            </div>
          </div>

        </div>
      </div>

    </div>



  </div>
  <!--右侧边栏结束-->
  <!--mini聊天窗口开始-->
  <div class="small-chat-box fadeInRight animated">

    <div class="heading" draggable="true">
      <small class="chat-date pull-right">
        2015.9.1
      </small> 与 Beau-zihan 聊天中
    </div>

    <div class="content">

      <div class="left">
        <div class="author-name">
          Beau-zihan <small class="chat-date">
          10:02
        </small>
        </div>
        <div class="chat-message active">
          你好
        </div>

      </div>
      <div class="right">
        <div class="author-name">
          游客
          <small class="chat-date">
            11:24
          </small>
        </div>
        <div class="chat-message">
          你好，请问H+有帮助文档吗？
        </div>
      </div>
      <div class="left">
        <div class="author-name">
          Beau-zihan
          <small class="chat-date">
            08:45
          </small>
        </div>
        <div class="chat-message active">
          有，购买的H+源码包中有帮助文档，位于docs文件夹下
        </div>
      </div>
      <div class="right">
        <div class="author-name">
          游客
          <small class="chat-date">
            11:24
          </small>
        </div>
        <div class="chat-message">
          那除了帮助文档还提供什么样的服务？
        </div>
      </div>
      <div class="left">
        <div class="author-name">
          Beau-zihan
          <small class="chat-date">
            08:45
          </small>
        </div>
        <div class="chat-message active">
          1.所有源码(未压缩、带注释版本)；
          <br> 2.说明文档；
          <br> 3.终身免费升级服务；
          <br> 4.必要的技术支持；
          <br> 5.付费二次开发服务；
          <br> 6.授权许可；
          <br> ……
          <br>
        </div>
      </div>


    </div>
    <div class="form-chat">
      <div class="input-group input-group-sm">
        <input type="text" class="form-control"> <span class="input-group-btn"> <button
              class="btn btn-primary" type="button">发送
                </button> </span>
      </div>
    </div>

  </div>
  <div id="small-chat">
    <span class="badge badge-warning pull-right">5</span>
    <a class="open-small-chat">
      <i class="fa fa-comments"></i>

    </a>
  </div>
  <!--mini聊天窗口结束-->
</div>
<script id="welcome-template" type="text/x-handlebars-template">
  <div class="border-bottom white-bg page-heading clearfix">
    <h2>更新日志：</h2>
    <div>今天是情人节，H+终于跨到了v3.0，就算是情人节礼物吧，感谢你们的不离不弃，一路相伴！</div>
    <div class="pull-right">——Beau-zihan / 2015.8.20</div>
  </div>
  <div class="m">
    <div class="tabs-container">
      <div class="tabs-left">
        <ul class="nav nav-tabs">
          <li class="active">
            <a data-toggle="tab" href="index.html#layouts"><i class="fa fa-columns"></i> 布局
            </a>
          </li>
          <li>
            <a data-toggle="tab" href="index.html#new"><i class="fa fa-plus-square"></i> 新增
            </a>
          </li>
          <li>
            <a data-toggle="tab" href="index.html#update"><i class="fa fa-arrow-circle-o-up"></i> 升级
            </a>
          </li>
          <li>
            <a data-toggle="tab" href="index.html#revise"><i class="fa fa-pencil"></i> 修正
            </a>
          </li>
          <li>
            <a data-toggle="tab" href="index.html#optimize"><i class="fa fa-magic"></i> 优化
            </a>
          </li>
        </ul>
        <div class="tab-content" style="line-height:1.8em;">
          <div id="layouts" class="tab-pane active">
            <div class="panel-body">
              <ol class="no-left-padding">
                <li class="text-danger"><b>推荐：</b>期待已久的contentTabs效果，支持关闭、双击刷新、左右滑动等；</li>
                <li>固定左侧主菜单栏，并对菜单项做了新的调整；</li>
                <li>增加右侧面板及聊天窗口等。</li>
              </ol>

              <p style="margin-left:25px;">
              <hr><span class="label label-danger">特别致谢</span> 感谢[子·梦]同学提供的contentTabs优化方案和代码！</p>
            </div>
          </div>
          <div id="new" class="tab-pane">
            <div class="panel-body">
              <ol class="no-left-padding">
                <li>表单：搜索自动补全插件suggest、高级表单插件（时间选择，切换按钮，图像裁剪上传，单选复选框美化，文件域美化等)等；</li>
                <li>图表：图表组合页面等；</li>
                <li>页面：团队、社交、客户管理、文章列表、文章详情、新登录页面等；</li>
                <li>UI元素：竖向选项卡、拖动面板、文本对比、加载动画、SweetAlert等；</li>
                <li>相册：layer相册、Blueimp相册等；</li>
                <li>表格：FooTables等。</li>
              </ol>
            </div>
          </div>


          <div id="update" class="tab-pane">
            <div class="panel-body">
              <ol>
                <li>页面弹层插件layer升级至1.9.3；</li>
                <li>更新jqgrid，支持树形表格；</li>
                <li>更新帮助文档。</li>
              </ol>
            </div>
          </div>
          <div id="revise" class="tab-pane">
            <div class="panel-body">
              <ol>
                <li>jstree、Simditor等多处错误；</li>
                <li>页面加载进度提示；</li>
                <li>Glyphicon字体图标不显示的问题；</li>
                <li>重新整理开发文档；</li>
              </ol>
            </div>
          </div>
          <div id="optimize" class="tab-pane">
            <div class="panel-body">
              <ol>
                <li>H+整体视觉效果；</li>
                <li>jstree默认主题显示效果；</li>
                <li>表单验证显示效果；</li>
                <li>iCheck显示效果；</li>
                <li>Tabs显示效果。</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="alert alert-warning alert-dismissable m-t-sm">
      <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
      同时这也是一个示例，演示了如何从iframe中弹出一个覆盖父页面的层。
    </div>
  </div>
</script>

<!-- 全局js -->
<script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js?v=3.4.0"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/static/js/hplus.min.js?v=3.2.0"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/contabs.min.js"></script>

<!-- 第三方插件 -->
<script src="${pageContext.request.contextPath}/static/js/plugins/pace/pace.min.js"></script>

</body>
</html>
